<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport"
	content="width=device-width, minimum-scale=1, initial-scale=1, maximum-scale=1, user-scalable=no"
	charset="UTF-8">
<link rel="stylesheet" href="android_asset://css/style.css" />
<link rel="stylesheet" href="android_asset://css/font.css" />
<title>工单详情</title>
</head>
<body>
	<div class="order_detail">
		<div class="top">
			<div class="items">
				<h4>报修详情</h4>
				<div class="item">
					<ul>
						<li>
							<h5 class="left">
								<span class="icon-jobinfo"></span>工单详情
							</h5> {% if ticket.priority == 0%} {% if respondTime == "2" or
							respondTime == "4" %}
							<div class="ts">
								<i class="ts_text">优先</i> <i class="ts_text2">{{respondTime}}小时</i>
							</div> {% endif %} {% elseif ticket.priority == 1 %}
							<div class="ts">
								<i class="ts_text">优先</i> {% if respondTime == "2" or
								respondTime == "4" %} <i class="ts_text2">{{respondTime}}小时</i>
								{% endif %}
							</div> {% else %}
							<div class="ts">
								<i class="ts_text">优先</i> {% if respondTime == "2" or
								respondTime == "4" %} <i class="ts_text2">{{respondTime}}小时</i>
								{% endif %}
							</div> {% endif %}
						</li>
						<li>
							<p class="left">
								<b class="left">工单名称：</b> <span class="block">{{ticket.caption}}</span>
							</p>
						</li>
						<li class="lineheight">
							<p class="file_p"><b class='left'>工单编号：</b><span class="block">{{ticket.id}}</span>
							</p>
							<p class="file_p">
								<b class='left'>故障分类：</b><span class="block">{{ticketEx.chrsystem}} >
									{{ticketEx.chrcategory}} > {{ticketEx.chrtype}}</span>
							</p>
							<p class="file_p">
								<b class='left'>响应时间：</b><span class="block">{{respondLevel}}</span>
							</p>
							<p class="file_p">
								<b class='left'>严重程度：</b><span class="block">{% if ticket.severity==0 %}一级{% elseif
									ticket.severity==1 %}二级{% elseif ticket.severity==2 %}三级{%
									elseif ticket.severity==3 %}四级{% elseif ticket.severity==4 %}五级
									{% endif %} </span>
							</p>
						</li>
						<li>
							<p>
								<b class="left">故障描述：</b> <span class="block">{{ticketEx.description}}</span>
							</p>
						</li>
						<li>
							<p>
								<b class="left">备注信息：</b>
					              {% if ticketEx.changenottobeview == 1 %}
					              	<span class="block" style="color:red">{{ticketEx.surveynote}}  (备注刚刚更新了 ::>_<::)</span>
					              {% elseif ticketEx.surveynotechanged == 1 %}
					              	<span class="block" style="color:red">{{ticketEx.surveynote}}</span>
					              {% else %}
					              	<span class="block">{{ticketEx.surveynote}}</span>
					              {% endif %}
							</p>
						</li>
					</ul>
				</div>
				<div class="item">
					<ul>
						<li>
							<h5 class="left">
								<span class="icon-customer"></span>客户信息
							</h5> <!--div class="right">
              <p class="left navigation"><span class="icon-navigation"></span>导航</p>
              <p class="right call"><span class="icon-phone" onclick="msAndroid.call('{% if ticketEx.customermobile is not null %}{{ticketEx.customermobile}}{% else %}{{ticketEx.customerphone}}{% endif %}')" ></span>电话</p>
            </div-->
						</li>
						<li>
							<div class="left name">请求客户：</div>
							<div class="left width75">
								<p>
									<span class="icon-customer1"></span><i>
										{{ticketEx.customername}}/{{ticketEx.chruserid}}</i>
								</p>
								<p>
									<span class="icon-phone1"></span> {% if ticketEx.customermobile
									is not null %} <i>{{- ticketEx.customermobile -}}</i> {% else
									%} <i>{{- ticketEx.customerphone -}}</i> {% endif %}
								</p>
								<p>
									<span class="icon-navigation1 left"></span><em class="block">{{ticketEx.cityname}}-{{ticketEx.customeraddress}}</em>
								</p>
							</div>
						</li> {% if ticketEx.address is not null %}
						<li class="actual-cust">
							<div class="left name">最终客户：</div>
							<div class="left width75">
								<p>
									<span class="icon-customer1"></span><i>{{ticketEx.actuallcustomer}}</i>
								</p>
								<p>
									<span class="icon-phone1"></span><i>{{ticketEx.actuallcustomerphone}}</i>
								</p>
								<p>
									<span class="icon-navigation1 left"></span><em class="block">{{ticketEx.cityname}}-{{ticketEx.address}}</em>
								</p>
							</div>
						</li> {% endif %}
					</ul>
				</div>
				<div class="pinfo">
					<p class="left">
						<span class="icon-proinfo"></span>项目信息
					</p>
					<p class="right">{{ticketEx.projectname}}</p>
				</div>
			</div>
			{% if ticket.status!=0 and ticket.status!=1 %}
			<div class="items">
				<h4>维修详情</h4>
				<a href="javascript:void(0);"
					onclick="msAndroid.get('/tickets/{{ticket.id}}/ticketparts')">
					<div class="pinfo">
						<p class="left">
							<span class="icon-eqinfo"></span>设备信息
						</p>
						<p class="right">
							详细信息<span class="icon-rightarrow"></span>
						</p>
					</div>
				</a> </a> <a href="javascript:void(0);"
					onclick="msAndroid.get('/tickets/{{ticket.id}}/solution')">
					<div class="pinfo">
						<p class="left">
							<span class="icon-eqinfo"></span>解决方案
						</p>
						<p class="right">
							详细信息<span class="icon-rightarrow"></span>
						</p>
					</div>
				</a> <a href="javascript:void(0);"
					onclick="msAndroid.get('/tickets/{{ticket.id}}/attachmentInfo')">
					<div class="pinfo">
						<p class="left">
							<span class="icon-eqinfo"></span>附件信息
						</p>
						<p class="right">
							详细信息<span class="icon-rightarrow"></span>
						</p>
					</div>
				</a>
			</div>
			{% endif %}
			<div class="items" id="order">
				<h4>流程信息</h4>
				<ul class="process">
					{% for ticketEventPO in ticketEventPOs %}
					<!-- 判断是否是抢单，接单，下次再约 -->
					{% if ticketEventPO.action=='confirm' %}
					<!-- 判断是否是下次再约-->
					{% if ticketEventPO.content.pendingcause is not null %}
					<li class="clearfix over"><span class="left"><i
							class="icon-circular"></i> 再约</span>
						<div class="left width68">
							<p>{{ticketEventPO.eventTime | date("yyyy-MM-dd HH:mm:ss")}}</p>
							<p>改约原因：{{ticketEventPO.content.pendingcause}}</p>
							<p>改约时间：{{ticketEventPO.eventTime | date("yyyy-MM-dd HH:mm:ss")}}</p>
						</div>
						<div class="right">
							<span class="icon-yes2"></span>
						</div></li> {% else %}
					<li class="clearfix over"><span class="left"><i
							class="icon-circular"></i> {% if ticket.policy == 0 %}派单{% else %}抢单{% endif %}</span>
						<div class="left">{% if ticket.policy == 0 %}派单{% else %}抢单{% endif %}：{{ticketEventPO.eventTime | date("yyyy-MM-dd
							HH:mm:ss")}}</div>
						<div class="right">
							<span class="icon-yes2"></span>
						</div></li> {% endif %}
					<!--判断是否是预约 -->
					{% elseif ticketEventPO.action=='appoint' %}
					<li class="clearfix over"><span class="left"><i
							class="icon-circular"></i> 预约</span>
						<div class="left width68">
							<p>{{ticketEventPO.eventTime | date("yyyy-MM-dd HH:mm:ss")}}</p>
							<p>到场时间：{{ticketEventPO.content.appointment}}</p>
							<p>事前提醒：{% if ticketEventPO.content.remindTime is null %}无{% else %}{{ticketEventPO.content.remindTime}}{% endif %}</p>
							<p>上门地址：{{ticketEx.cityname}}-{{ticketEventPO.content.address}}</p>
							<p>随手记 ：{% if ticketEventPO.content.pendingcause is null %}无{% else %}{{ticketEventPO.content.pendingcause}}{% endif %}</p>
						</div>
						<div class="right">
							<span class="icon-yes2"></span>
						</div></li>
					<!-- 判断是否为改约 -->
					{% elseif ticketEventPO.action=='reappoint' %}
					<li class="clearfix over"><span class="left"><i
							class="icon-circular"></i> 改约</span>
						<div class="left width68">
							<p>{{ticketEventPO.eventTime | date("yyyy-MM-dd HH:mm:ss")}}</p>
							<p>到场时间：{{ticketEventPO.content.pendingtime}}</p>
							<p>事前提醒 ：{% if ticketEventPO.content.remindTime is null %}无{% else %}{{ticketEventPO.content.remindTime}}{% endif %}</p>
							<p>上门地址：{{ticketEx.cityname}}-{{ticketEventPO.content.address}}</p>
							<p>改约原因 ：{% if ticketEventPO.content.pendingcause is null	%}无{% else %}{{ticketEventPO.content.pendingcause}}{% endif %}</p>
						</div>
						<div class="right">
							<span class="icon-yes2"></span>
						</div></li>
					<!-- 判断是否为签到 -->
					{% elseif ticketEventPO.action=='signin' %}
					<li class="clearfix over"><span class="left"><i
							class="icon-circular"></i> 到场</span>
						<div class="left">{% if ticketEventPO.content.signtype=='0' %}自动签到{% else %}拍照签到{% endif %}：{{ticketEventPO.eventTime |date("yyyy-MM-dd HH:mm:ss")}}</div>
						<div class="right">
							<span class="icon-yes2"></span>
						</div></li>
					<!-- 判断是否为完成 -->
					{% elseif ticketEventPO.action=='finish' %}
					<li class="clearfix over"><span class="left"><i
							class="icon-circular"></i> 完成</span>
						<div class="left">已完成：{{ticketEventPO.eventTime |date("yyyy-MM-dd HH:mm:ss")}}</div>
						<div class="right">
							<span class="icon-yes2"></span>
						</div></li>
					<!-- 判断是否为评价 -->
					{% elseif ticketEventPO.action=='evaluate' %}
					<li class="clearfix over"><span class="left"><i
							class="icon-circular"></i> 评价</span>
						<div class="left">{% if ticketEx.attachment_requirements == "1" %}已评价待审核：{% else %}已评价关单：{% endif %}{{ticketEventPO.eventTime |date("yyyy-MM-dd HH:mm:ss")}}</div>
						<div class="right">
							<span class="icon-yes2"></span>
						</div></li>
					{% elseif ticketEventPO.action=='breakoff' %}
			      		<li class="clearfix over">
				          <span class="left"><i class="icon-circular"></i> 关单</span>
				          	<div class="left width68">
				          		<p>已快速关单：{{ticketEventPO.eventTime | date("yyyy-MM-dd HH:mm:ss")}}</p>
				          		<p>关单原因：{{ticketEventPO.content.backreasonapp}}</p>
				          	</div>	
				          	<div class="right"><span class="icon-yes2"></span></div>
				        </li>
				    {% elseif ticketEventPO.action=='rework' %}
			      		<li class="clearfix over">
				          <span class="left"><i class="icon-circular"></i> 工单返工</span>
				          <div class="left">{{ticketEventPO.eventTime | date("yyyy-MM-dd HH:mm:ss")}}</div>
				          <div class="right"><span class="icon-yes2"></span></div>
				        </li>    
					{% endif %} {% endfor %}
				</ul>
			</div>
		</div>
		<div class="bottom">
			<!--    
    <div class="footers">
      <button onclick="msAndroid.get('/tickets/{{ticket.id}}/uploadPage')"><a href="#">上传附件</a></button>
    </div>
-->
			<div class="confirm">
				<button class="loadpage"
					onclick="msAndroid.get('/tickets/{{ticket.id}}/uploadPage')">
					<a href="#">上传附件</a>
				</button>
			</div>
		</div>
</body>
<script src="android_asset://jquery-1.11.0.min.js"
	type="text/javascript"></script>
<script src="android_asset://jquery-migrate-1.2.1.min.js"
	type="text/javascript"></script>
<script src="android_asset://jquery.touchSwipe.min.js"
	type="text/javascript"></script>
<script src="android_asset://bridge.js" type="text/javascript"></script>
<script src="android_asset://android.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
	
	  $('div.pinfo').on('keydown touchstart', function () {
		  $(this).css("background", '#e0e0e5');
	  });
	  $('div.pinfo').on('keyup touchend', function () {
	      $(this).css("background", '#fff');
	  });
	  $('button.loadpage').on('keydown touchstart', function () {
		  $(this).css("background", '#216cb9');
	  });
	  $('button.loadpage').on('keyup touchend', function () {
	      $(this).css("background", '#3e8ddd');
	  });
});

	roll();
	var win=$(".circle").width();
	$(".circle").css({
	  "height":win,
	  'lineHeight':win+'px'
	});
	var flowhig = $('.flowsheet').outerHeight();
	$('.flows').css({ "height":flowhig });
	$('.flowsheet li:last-child').find('.line').addClass('hidden');
	
	/*滚动效果*/
	$(document).ready(function() {
	    var top = $("#order").offset().top;
	    $('.flows').on('touchend',function(){
	      $('body').animate({scrollTop:top},300);
	    });  
	});
	
	//滑动效果
	function roll(){
	    var length=$('.flowsheet li').size(),
	        index = $('.blue').parents('li').index(),
	        wh=100*length+"%", 
	        lt=(100/length/5), 
	        lt_li=lt+"%",
	        y=0, 
	        w=length-5;
	    if(index>4){
	      tab(length-index);
	      y = -lt*index;
	    }
	    $('.flowsheet').width(wh); 
	    $('.flowsheet li').width(lt_li);        
	    $(".flowsheet").swipe( { 
	      swipeLeft:function() {
	        console.log(-lt*w);
	        if(y==-lt*w){
	          return false;
	        }else{
	          y=y-lt;               
	          var t=y+"%";    
	          $(this).css({'-webkit-transform':"translate("+t+")",'-webkit-transition':'500ms linear'} ); 
	        }
	      }, 
	      swipeRight:function() {
	        if(y==0){
	          return false;  
	        }else{
	          y=y+lt;
	          var t=y+"%";
	          $(this).css({'-webkit-transform':"translate("+t+")",'-webkit-transition':'500ms linear'} ); 
	        }
	      }
	    });
	}
	//超过5个
	function tab(e){
	  var length=$('.flowsheet li').size(),
	      lt=(100/length/5), 
	      t=-(lt*e)+"%";
	      y=-lt*2;                      
	    $('.flowsheet').css({'-webkit-transform':"translate("+t+")",'-webkit-transition':'500ms linear'}) ;
	}  
	//动画变色
	function animate(){
	  var circle = $(".circle"),
	      blue = $(".blue"),
	      wire = $(".wire");
	  blue.addClass("gron").removeClass("blue");
	  setTimeout(function(){
	      $('.gron').addClass('green').removeClass("gron")
	  },500);
	  blue.parents('li').find(wire).addClass("wion");
	  setTimeout(function(){
	      $('.wion').addClass("green").removeClass("wion");
	  },1500);
	  blue.parents('li').next().find(circle).addClass("oron")
	  setTimeout(function(){
	      $('.oron').addClass("blue").removeClass("oron");
	  },2000)
	}
	
	msAndroid.pageData={latitude:"{{ticket.latitude}}",longitude:"{{ticket.longitude}}",ticketId:"{{ticket.id}}",activityId:"{{ticketProcess.currentActivity.activityId}}",actionForm:"{{ticketProcess.currentActivity.actionForm}}"};
	/**
	 * 流程页面更多按钮
	 */
    msAndroid.flowMore = function(){
		 var data = {actionCode:11, data:[
		              {% if ticketProcess.currentActivity.activityKey == "signin" or ticketProcess.currentActivity.activityKey == "resolve"%}
		              {actionId:1, actionName:"改约", icon:"/image/more/changeDate_on.png"},
		              {% else %}
		              {actionId:1, actionName:"改约", icon:"/image/more/changeDate_off.png",disable:true},
		              {% endif %}
		              {% if ticketProcess.currentActivity.activityKey != "customerFeedback" %}
		              {actionId:2, actionName:"快速关单", icon:"/image/more/close_on.png"},
		              {% else %}
		              {actionId:2, actionName:"快速关单", icon:"/image/more/close_off.png",disable:true},
		              {% endif %}
		              {actionId:3, actionName:"项目组", icon:"/image/more/group_on.png"},
		              {actionId:4, actionName:"上传附件", icon:"/image/more/upload_on.png"},
		          ]};
		  window.WebViewJavascriptBridge.send(
		      data,function(responseData) {
		          var option = eval('(' + responseData + ')');
		          if(option.status == 1){
		              var id = option.data.actionId;
		              if(id == 1){
		            	  toActivityByUrl("/tickets/{{ticket.id}}/{{ticketProcess.currentActivity.activityId}}/changeAppoint");
		              }else if(id == 2){
		            	  
		              }else if(id == 3){
		              
		              } else if(id == 4){
		            	  
		              }
		          }
		      }
		  );
	};
	
	$(function(){
		signIn();
	});
</script>
</html>